<template>
  <div v-if="currentCourse">
    <h2 class="text-xl font-bold mb-2">{{ currentCourse.name }}</h2>
    <div
      class="video-player bg-black h-[400px] mb-4 flex justify-center items-center"
    >
      <video
        controls
        class="w-full h-full"
        :src="currentCourse.videoUrl"
      ></video>
    </div>
    <template v-if="homework.length > 0">
      <div
        v-for="item in homework"
        class="w-full flex flex-col gap-4 p-4 rounded-md mb-4"
        style="border: 1px solid #ccc"
      >
        <div v-for="file in item.files" class="w-full flex items-center gap-4">
          <span>{{ file.name }}</span>
          <el-button type="primary" @click="downloadHomework(file.fileUrl)">
            下载
          </el-button>
        </div>

        <div v-if="item.stuHomeworks && item.stuHomeworks.length > 0">
          <h3 class="text-lg font-bold mb-2">学生作业列表</h3>
          <div>
            {{ item.stuHomeworks }}
          </div>
        </div>

        <div class="flex flex-col gap-4">
          <h3 class="text-lg font-bold mb-2">作业描述</h3>
          <textarea
            v-model="item.desc"
            rows="5"
            class="p-4"
            style="border: 1px solid #ccc"
          ></textarea>
          <div v-if="item.file" class="flex items-center justify-between">
            <span>{{ item.file.name }}</span>
            <el-button type="danger" @click="item.file = null">
              删除
            </el-button>
          </div>
          <el-button
            class="w-full"
            type="primary"
            @click="handleUploadHomeFile(item)"
          >
            点击上传作业
          </el-button>
          <el-button
            class="w-full !m-0"
            type="primary"
            @click="handleSubmitHome(item)"
          >
            点击提交作业
          </el-button>
        </div>
      </div>
    </template>
  </div>
</template>
<script lang="ts" setup>
import { useRoute } from "vue-router";
import {
  getCourseHomework,
  getHomeworkByCourseHomeworkId,
  studentSubmitHomework,
} from "../../api/modules/course";
import { request } from "../../utils/request";
import { useUserStore } from "../../store/user";
import { ElMessage } from "element-plus";

const userStore = useUserStore();
const userInfo = computed(() => userStore.userInfo.value);

const currentCourse = ref<any>(null);

const route = useRoute();
const courseId = route.query.id as string;

const homework = ref<any>([]);

function handleUploadHomeFile(item: any) {
  const input = document.createElement("input");
  input.type = "file";
  input.multiple = true;
  input.accept = "*.doc,.docx";
  input.onchange = (e: any) => {
    const file = e.target.files?.[0];
    if (!file) return;
    item.file = file;
  };
  input.click();
}
function handleSubmitHome(item: any) {
  if (!item.file) {
    ElMessage.warning("请选择文件");
    return;
  }
  if (!item.desc) {
    ElMessage.warning("请输入作业描述");
    return;
  }
  const formData = new FormData();
  formData.append("file", item.file);
  formData.append("desc", item.desc);
  formData.append("courseHomeworkId", item.id);

  request({
    fn: studentSubmitHomework,
    params: [formData],
    success() {
      ElMessage.success("提交成功");
      item.file = null;
      item.desc = "";
    },
  });
}

// 查询课程作业
function getHomeworkByCourseHomeworks(item) {
  request({
    fn: getHomeworkByCourseHomeworkId,
    params: [item.id, userInfo.value.id],
    success(res) {
      item.stuHomeworks = res.data;
    },
  });
}

function getHomework(id: string) {
  request({
    fn: getCourseHomework,
    params: [id],
    success(res) {
      homework.value = res.data;
      homework.value.forEach((item: any) => {
        item.homeworks = {
          desc: "",
          file: "",
        };
        getHomeworkByCourseHomeworks(item);
      });
    },
  });
}

getHomework(courseId);
</script>
<style scoped lang="scss"></style>
